<template>
  <div class="home-page">
    <div class="header">
      <h1>🚗 智能交通分析系统</h1>
      <p class="subtitle">基于深度学习的车辆与车牌识别</p>
    </div>

    <div class="feature-cards">
      <router-link to="/vehicle-detection" class="feature-card">
        <div class="card-icon">🚘</div>
        <h2>车辆位置识别</h2>
        <p>检测图片中的车辆位置</p>
      </router-link>

      <router-link to="/plate-recognition" class="feature-card">
        <div class="card-icon">🔢</div>
        <h2>车牌识别</h2>
        <p>识别车牌号码与位置</p>
      </router-link>
      <router-link to="/combined-detection" class="feature-card">
        <div class="card-icon">🚗🔢</div>
        <h2>综合识别</h2>
        <p>先检测车辆，再识别车牌</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage'
}
</script>

<style scoped>
.home-page {
  max-width: 100vw;
  margin: 0 auto;
  padding: 40px 20px;
}

.header {
  text-align: center;
  margin-bottom: 60px;
}

.header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 15px;
}

.subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.feature-card {
  background: white;
  border-radius: 15px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  color: #2c3e50;
  text-decoration: none;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.card-icon {
  font-size: 4rem;
  margin-bottom: 20px;
}

.feature-card h2 {
  margin-bottom: 15px;
  font-size: 1.8rem;
}

.feature-card p {
  color: #7f8c8d;
  font-size: 1.1rem;
}
</style>